import { useEffect, useState } from "react";
import AMapLoader from "@amap/amap-jsapi-loader";
import "./index.scss";

export default function Index({
  lon,
  lat,
  selectCity,
}: {
  lon: number | string;
  lat: number | string;
  selectCity: string;
}) {
  const [Key] = useState<string>("e35069d2a4accd0ad0f6b52ead59aedd"); //高德显示key
  useEffect(() => {
    let map: {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      add: (marker: any) => void;
      destroy: () => void;
    } | null = null;
    AMapLoader.load({
      key: Key, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map("map", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 11, // 初始化地图级别
          center: [lon, lat], // 初始化地图中心点位置
        });
        //添加marker
        const marker1 = new AMap.Marker({
          icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", //在线图标
          position: [lon, lat],
          title: "坐标",
          zoom: 999,
        });
        marker1.setLabel({
          content: selectCity,
          offset: new AMap.Pixel(-20, 36),
        });
        map.add([marker1]);
      })
      .catch((e) => {
        console.log(e);
      });
    return () => {
      map?.destroy();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [lon, lat, selectCity]);

  return <div id="map"></div>;
}
